<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="../base/top.jsp" %>
    <!-- 下拉框 -->
    <link rel="stylesheet" href="static/ace/css/chosen.css"/>
    <!-- 日期框 -->
    <link rel="stylesheet" href="static/ace/css/datepicker.css"/>
    <style type="text/css">
        .steps {
            list-style: none;
            display: table;
            width: 80%;
            padding: 0;
            margin: 0;
            margin: auto;
            position: relative;
        }
        .steps li {
            display: table-cell;
            text-align: center;
            width: 1%;
        }
        .steps li .step {
            border: 2px solid #ced1d6;/*灰色*/
            color: #546474;/*深灰色*/
            font-size: 15px;
            border-radius: 100%;
            background-color: #FFF;
            position: relative;
            z-index: 2;
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 10px;
            text-align: center;
        }
        .steps li:before {
            display: block;
            content: "";
            width: 100%;
            height: 1px;
            font-size: 0;
            overflow: hidden;
            border-top: 3px solid #CED1D6;
            position: relative;
            top: 12px;
            z-index: 1;
        }
        .steps li.last-child:before {
            max-width: 50%;
            width: 50%;
        }
        .steps li:last-child:before {
            max-width: 50%;
            width: 50%;
        }
        .steps li:first-child:before {
            max-width: 51%;
            left: 50%;
        }
        .steps li.active:before,
        .steps li.active .step {
            border-color: #5293c4;
        }
        .steps li .title {
            display: block;
            margin-top: 2px;
            max-width: 100%;
            color: #949ea7;
            font-size: 12px;
            z-index: 104;
            text-align: center;
            table-layout: fixed;
            word-wrap: break-word;
        }
        .steps li.active .title {
            color: #2b3d53;
        }
    </style>
</head>
<body class="no-skin">
<!-- /section:basics/navbar.layout -->
<div class="main-container" id="main-container">
    <!-- /section:basics/sidebar -->
    <div class="main-content" style="width:80%; margin: auto;">
        <div class="main-content-inner">
            <div class="page-content">
                <div class="page-header" style="height: 130px;">
                    <div>
                        <p style="text-align: center; line-height: 80px; font-size: 30px; color: #6FAED9;" >项目进度</p>
                    </div>
                    <div>
                        <table style="margin-top:5px;" width="100%">
                            <tbody><tr>
                                <td style="width: 100px;padding-bottom: 5px">
                                    <select class="chosen-select form-control" data-placeholder="请选择课程" style="vertical-align:top;width: 120px;">
                                        <option value=""></option>
                                        <option value="student">软件测试</option>
                                        <option value="teacher">软件设计</option>
                                        <option value="teacher">需求分析</option>
                                        <option value="teacher">毕业设计</option>
                                    </select>
                                </td>
                                <td style="float:right;">
                                    <div style="float:right;">
                                        <span >
                                            <label style="float:right;">
                                                <input name="switch-field-1" class="ace ace-switch ace-switch-3" type="checkbox" checked="checked">	<span class="lbl">&nbsp;我指导的项目</span>
                                            </label>
                                        </span>
                                    </div>
                                </td>
                            </tr></tbody>
                        </table>
                    </div>
                </div>
                <div class="row" >
                    <div class="col-xs-12">
                        <!-- 检索  -->
                        <form action="fhbutton/list.do" method="post" name="Form" id="Form">
                            <!--<table style="margin-top:5px;" width="100%">
                                <tbody>
                                    <tr>
                                        <td>
                                        </td>
                                        <td style="float:right;">
                                            <div style="float:right;">
                                                <span >
                                                    <label style="float:right;">
                                                        <input name="switch-field-1" class="ace ace-switch ace-switch-5" type="checkbox" checked="checked">	<span class="lbl">我指导的项目</span>
                                                       </label>
                                                </span>
                                            </div>
                                           </td>
                                    </tr>
                                </tbody>
                            </table>-->
                            <div  class="table-header" style="height: 30px;">
                            </div>
                            <!-- 检索  -->
                            <div class="progress_main">
                                <table id="simple-table" class="table table-striped table-bordered table-hover" style="margin-top:5px;">
                                    <tbody>
                                    <tr>
                                        <td class="center" style="vertical-align: middle;"><a href="<%=basePath%>graduationprocess/details.do">案例库一</a></td>
                                        <td class="center" >
                                            <ul class="steps">
                                                <li data-step="1" class="active">
                                                    <span class="step"></span>
                                                    <span class="title">开题报告</span>
                                                    <span class="title">1997/01/10</span>
                                                </li>
                                                <li data-step="1" class="active">
                                                    <span class="step"></span>
                                                    <span class="title">需求设计</span>
                                                    <span class="title">1997/01/10</span>
                                                </li>
                                                <li data-step="1" class="active">
                                                    <span class="step"></span>
                                                    <span class="title">概要设计</span>
                                                    <span class="title">1997/01/10</span>
                                                </li>
                                                <li data-step="1" class="active">
                                                    <span class="step"></span>
                                                    <span class="title">详细设计</span>
                                                    <span class="title">1997/01/10</span>
                                                </li>
                                                <li data-step="1">
                                                    <span class="step"></span>
                                                    <span class="title">详细代码</span>
                                                    <span class="title"></span>
                                                </li>
                                                <li data-step="1">
                                                    <span class="step"></span>
                                                    <span class="title">测试文档</span>
                                                    <span class="title"></span>
                                                </li>
                                                <li data-step="1">
                                                    <span class="step"></span>
                                                    <span class="title">答辩申请书</span>
                                                    <span class="title"></span>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="center" style="vertical-align: middle;"><a href="<%=basePath%>graduationprocess/details.do">案例库一</a></td>
                                        <td class="center" >
                                            <ul class="steps">
                                                <li data-step="1" class="active">
                                                    <span class="step"></span>
                                                    <span class="title">开题报告</span>
                                                    <span class="title">1997/01/10</span>
                                                </li>
                                                <li data-step="1" class="active">
                                                    <span class="step"></span>
                                                    <span class="title">需求设计</span>
                                                    <span class="title">1997/01/10</span>
                                                </li>
                                                <li data-step="1" >
                                                    <span class="step"></span>
                                                    <span class="title">概要设计</span>
                                                    <span class="title">1997/01/10</span>
                                                </li>
                                                <li data-step="1" class="active">
                                                    <span class="step"></span>
                                                    <span class="title">详细设计</span>
                                                    <span class="title">1997/01/10</span>
                                                </li>
                                                <li data-step="1">
                                                    <span class="step"></span>
                                                    <span class="title">详细代码</span>
                                                    <span class="title"></span>
                                                </li>
                                                <li data-step="1">
                                                    <span class="step"></span>
                                                    <span class="title">测试文档</span>
                                                    <span class="title"></span>
                                                </li>
                                                <li data-step="1">
                                                    <span class="step"></span>
                                                    <span class="title">答辩申请书</span>
                                                    <span class="title"></span>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="center" style="vertical-align: middle;"><a href="<%=basePath%>graduationprocess/details.do">案例库一</a></td>
                                        <td class="center" >
                                            <ul class="steps">
                                                <li data-step="1" class="active">
                                                    <span class="step"></span>
                                                    <span class="title">开题报告</span>
                                                    <span class="title">1997/01/10</span>
                                                </li>
                                                <li data-step="1" >
                                                    <span class="step"></span>
                                                    <span class="title">需求设计</span>
                                                    <span class="title">1997/01/10</span>
                                                </li>
                                                <li data-step="1" class="active">
                                                    <span class="step"></span>
                                                    <span class="title">概要设计</span>
                                                    <span class="title">1997/01/10</span>
                                                </li>
                                                <li data-step="1" class="active">
                                                    <span class="step"></span>
                                                    <span class="title">详细设计</span>
                                                    <span class="title">1997/01/10</span>
                                                </li>
                                                <li data-step="1">
                                                    <span class="step"></span>
                                                    <span class="title">详细代码</span>
                                                    <span class="title"></span>
                                                </li>
                                                <li data-step="1">
                                                    <span class="step"></span>
                                                    <span class="title">测试文档</span>
                                                    <span class="title"></span>
                                                </li>
                                                <li data-step="1">
                                                    <span class="step"></span>
                                                    <span class="title">答辩申请书</span>
                                                    <span class="title"></span>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="page-header position-relative">
                                <table style="width:100%;">
                                    <tbody><tr>
                                        <td style="vertical-align:top;">
                                            <div class="pagination" style="float: right;padding-top: 0px;margin-top: 0px;">
                                                <ul class="pagination pull-right no-margin">
                                                    <li><a>共<font color="red">4</font>条</a></li>
                                                    <li><input type="number" value="" id="toGoPage" style="width:50px;text-align:center;float:left" placeholder="页码"></li>
                                                    <li style="cursor:pointer;"><a onclick="toTZ();" class="btn btn-mini btn-success">跳转</a></li>
                                                    <li><a>首页</a></li>
                                                    <li><a>上页</a></li>
                                                    <li class="active"><a><font color="white">1</font></a></li>
                                                    <li><a>下页</a></li>
                                                    <li><a>尾页</a></li>
                                                    <li><a>共1页</a></li>
                                                    <li><select title="显示条数" style="width:55px;float:left;margin-top:1px;" onchange="changeCount(this.value)">
                                                        <option value="10">10</option>
                                                        <option value="10">10</option>
                                                        <option value="20">20</option>
                                                        <option value="30">30</option>
                                                        <option value="40">40</option>
                                                        <option value="50">50</option>
                                                        <option value="60">60</option>
                                                        <option value="70">70</option>
                                                        <option value="80">80</option>
                                                        <option value="90">90</option>
                                                        <option value="99">99</option>
                                                    </select>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr></tbody>
                                </table>
                            </div>
                        </form>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.page-content -->
        </div>
    </div>
    <!-- /.main-content -->
    <!-- 返回顶部 -->
    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div>
<!-- /.main-container -->

<!-- basic scripts -->
<!-- 页面底部js¨ -->
<%@ include file="../base/foot.jsp" %>
<!-- 下拉框 -->
<script src="static/ace/js/chosen.jquery.js"></script>
<script type="text/javascript">
    $(".oning11").click(function(){
        $(this).parent().parent().prev().removeClass("green");
        $(this).parent().parent().prev().addClass("red");
        $(this).parent().parent().prev().text("不通过");
        $(this).hide();
        $(this).prev().show();
    })
    $(".offing11").click(function(){
        $(this).parent().parent().prev().removeClass("red");
        $(this).parent().parent().prev().addClass("green");
        $(this).parent().parent().prev().text("通过");
        $(this).hide();
        $(this).next().show();
    })
    $(function () {
        //下拉框
        if(!ace.vars['touch']) {
            $('.chosen-select').chosen({allow_single_deselect:true});
            $(window)
                .off('resize.chosen')
                .on('resize.chosen', function() {
                    $('.chosen-select').each(function() {
                        var $this = $(this);
                        $this.next().css({'width': $this.parent().width()});
                    });
                }).trigger('resize.chosen');
            $(document).on('settings.ace.chosen', function(e, event_name, event_val) {
                if(event_name != 'sidebar_collapsed') return;
                $('.chosen-select').each(function() {
                    var $this = $(this);
                    $this.next().css({'width': $this.parent().width()});
                });
            });
            $('#chosen-multiple-style .btn').on('click', function(e){
                var target = $(this).find('input[type=radio]');
                var which = parseInt(target.val());
                if(which == 2) $('#form-field-select-4').addClass('tag-input-style');
                else $('#form-field-select-4').removeClass('tag-input-style');
            });
        }


    });
</script>
</body>
</html>